<template>
  <el-card>
    <div class="common-layout">
    <div><span style="font-size: 30px;">优品仓库:{{ warehouseCode }}</span></div>
    <el-container>
      <el-aside width="200px">
        <br/>
        提交人:{{ accountName }}<br/>
        仓库编号:{{ warehouseCode }}<br/>
        库管部门:{{ organizationName }}<br/>
      </el-aside>
      <el-main>
        操作时间:{{ moment(accountDate).format("YYYY-MM-DD HH:mm:ss") }}<br/>
        仓库名称:{{warehouseName}}<br/>
        仓库主管:{{userName}}<br/>
      </el-main>
      <el-main>
        更新时间:{{ moment(accountDate).format("YYYY-MM-DD HH:mm:ss") }}<br/>
        仓库容量:{{ warehouseCapacity }}<br/>
        仓库联系电话:{{ warehousePhone }}<br/>
      </el-main>
      <el-aside width="200px">
        状态:
        <br/>
        <span v-if="warehouseState==1&&warehouseLock==false" style="font-size: 25px;">启用</span>
        <span v-if="warehouseState==2" style="font-size: 25px;">停用</span>
        <span v-if="warehouseLock==true&&warehouseState==1" style="font-size: 25px;">已锁定</span>
        <br/>
        库位数量:
        <br/><span style="font-size: 25px;">{{ storagelocationNum }}</span><br/>
      </el-aside>
    </el-container>
      <div>
        仓库地址:{{ warehouseAddress }}<br/>
        备注:{{ warehouseNote }}<br/>
      </div>
  </div>
   
    <template #footer>
      创建人:{{ accountName }} &nbsp;
      创建时间:{{  moment(accountDate).format("YYYY-MM-DD HH:mm:ss")  }}
    </template>
  </el-card>
  <el-card>
    <el-tabs v-model="activeName" class="demo-tabs" @tab-click="handleClick">
    <el-tab-pane label="库位信息" name="first">
    <el-container>
      <el-header>
        <el-form :inline="true" :model="formInline" class="demo-form-inline">
    <el-form-item label="仓库">
      <el-input style="width: 150px;" v-model="formInline.name" placeholder="请输入仓位名称" clearable />
    </el-form-item>
    <el-form-item label="库位状态">
      <el-select
        v-model="formInline.storagelocationstate"
        placeholder="请选择"
        clearable
        style="width: 150px;"
      >
        <el-option label="启用" :value="1" />
        <el-option label="停用" :value="2" />
      </el-select>
    </el-form-item>
    <el-form-item label="库位主管">
      <el-input style="width: 150px;" v-model="formInline.userid" placeholder="请输入" clearable />
    </el-form-item>
    <el-form-item>
      <el-button type="primary" size="small" @click="getstoragelocation">查询</el-button>
      <el-button size="small" @click="newgetstoragelocation">重置</el-button>
    </el-form-item>
  </el-form>
      </el-header>
      <el-main>
        <el-button @click="impactexcel">导出</el-button>
        <el-button @click="stateall(1)">启用</el-button>
        <el-button @click="stateall(2)">停用</el-button>
        <el-button @click="delall">删除</el-button>
          <el-table
    ref="multipleTableRef"
    :data="tableDatastoragelocation"
    row-key="storagelocationId"
    style="width: 100%"
    @selection-change="handleSelectionChange"
  >
    <el-table-column type="selection" :selectable="selectable" width="55" />
    <el-table-column type="index" label="序号" width="150" />
    <el-table-column prop="storagelocationCode" label="库位编号" width="120" />
    <el-table-column prop="storagelocationName" label="库位名称" width="120" />
    <el-table-column prop="storagelocationCapacity" label="库位容量" width="120" />
    <el-table-column prop="storagelocationSort" label="排序" width="120" />
    <el-table-column prop="storagelocationState" label="库位状态" width="120"  >
      <template #default="spoce">
        <el-tag type="success" v-if="spoce.row.storagelocationState==1">启用</el-tag>
        <el-tag type="danger" v-if="spoce.row.storagelocationState==2">停用</el-tag>
      </template>
    </el-table-column>
    <el-table-column prop="storagelocationNote" label="备注" width="120" />
  </el-table>
  <table>
          <tbody>
            <th>
              <td>
                <el-pagination
      v-model:current-page="page.pageindex"
      v-model:page-size="page.pagesize"
      :page-sizes="[10, 20, 30, 40]"
      prev-text="上一页"
      next-text="下一页"
      :background="true"
      layout="slot"
      :total="page.listCount"
    >
    <template #default="spoce">
        共{{ page.listCount }}条,每页{{ page.pagesize }}条,当前第{{ page.pageindex }}/{{ page.pageCount }}页
      </template>
                </el-pagination>
              </td>
              <td>
                <el-pagination
      v-model:current-page="page.pageindex"
      v-model:page-size="page.pagesize"
      :page-sizes="[10, 20, 30, 40]"
      prev-text="上一页"
      next-text="下一页"
      :background="true"
      layout="slot, prev, pager, next"
      :total="page.listCount"
    >
    <template #default="spoce">
        <el-button link type="primary" size="small" @click="page.pageindex=1">首页</el-button>
      </template>
                </el-pagination>
              </td>
              <td>
                <el-pagination
      v-model:current-page="page.pageindex"
      v-model:page-size="page.pagesize"
      :page-sizes="[10, 20, 30, 40]"
      prev-text="上一页"
      next-text="下一页"
      :background="true"
      layout="slot, sizes, jumper"
      :total="page.listCount"
    >
    <template #default="spoce">
      <el-button link type="primary" size="small" @click="page.pageindex=page.pageCount">
          尾页
        </el-button>
      </template>
                </el-pagination>
              </td>
            </th>
          </tbody>
        </table>

      </el-main>
    </el-container>

    </el-tab-pane>
    <el-tab-pane label="操作记录" name="second">

    </el-tab-pane>
  </el-tabs>
  </el-card>
</template>
<script lang="ts" setup>
import { onMounted, reactive, ref,watch } from 'vue'
import { ElMessage, type TableInstance,ElMessageBox } from 'element-plus'
import moment from 'moment';
import type { TabsPaneContext } from 'element-plus'
import {useRouter,useRoute } from "vue-router";
import  myaxios  from "@/http/MyAxios";
const router=useRouter();
const route=useRoute();
onMounted(()=>
{
  dateil();
  getstoragelocation();
})
   const warehouseId=ref('');
   const warehouseCode=ref('');
   const warehouseName=ref('');
   const warehouseCapacity=ref('');
   const userId=ref('');
   const warehouseAddress=ref('');
   const storagelocationNum=ref('');
   const warehouseSort=ref('');
   const warehouseLock=ref(null);
   const warehouseNote=ref('');
   const organizationId=ref('');
   const warehousePhone=ref('');
   const organizationName=ref('');
   const accountName=ref('');
   const warehouseState=ref(null);
   const userName=ref('');
   const accountDate=ref('');
//详情仓库
const dateil=()=>
{
  myaxios.get('/api/Warehouse/DetailWarehouse?warehouseid='+route.query.warehouseId)
  .then(res=>
  {
    warehouseId.value=res.data.data.warehouseId;       
    warehouseCode.value=res.data.data.warehouseCode;
    warehouseName.value=res.data.data.warehouseName;
    warehouseCapacity.value=res.data.data.warehouseCapacity;
    userId.value=res.data.data.userId;
    warehouseAddress.value=res.data.data.warehouseAddress;
    storagelocationNum.value=res.data.data.storagelocationNum;
    warehouseSort.value=res.data.data.warehouseSort;
    warehouseLock.value=res.data.data.warehouseLock;
    warehouseNote.value=res.data.data.warehouseNote;
    organizationId.value=res.data.data.organizationId;
    warehousePhone.value=res.data.data.warehousePhone;
    organizationName.value=res.data.data.organizationName;
    accountName.value=res.data.data.accountName;
    warehouseState.value=res.data.data.warehouseState;
    userName.value=res.data.data.userName;
    accountDate.value=res.data.data.accountDate;
  }
  )
}
//显示库位
const tableDatastoragelocation = ref([]);
//查询条件
const formInline = reactive({
  storagelocationstate: '',
  userid: '',
  name:''
})
//分页条件
const page=reactive({
  pageindex:1,
  pagesize:10,
  listCount:0,
  pageCount:0
})
watch(page,()=>
{
  getstoragelocation();
})
const getstoragelocation=()=>
{
  myaxios.get("/api/Warehouse/GetStoragelocation",{params:{
    name:formInline.name,
    warehouseId:route.query.warehouseId,
    userid:formInline.userid,
    storagelocationstate:formInline.storagelocationstate,
    pageindex:page.pageindex,
    pagesize:page.pagesize,

  }})
  .then(res=>
  {
    tableDatastoragelocation.value=res.data.data.data;
    page.listCount=res.data.data.listCount;
    page.pageCount=res.data.data.pageCount;
  }
  )
}
//重置
const newgetstoragelocation=()=>
{
  formInline.name='';
  formInline.storagelocationstate='';
  formInline.userid='';
  getstoragelocation();
}
//标签页
const activeName = ref([])

const handleClick = (tab: TabsPaneContext, event: Event) => {
  console.log(tab, event)
}
const impactexcel=()=>
{
  location.href=`http://localhost:8080/api/Warehouse/ImporeExcel?warehouseId=740710504853573&pageindex=1&pagesize=100000`
}
//批量
const handleSelectionChange = (val: any) => {
  multipleSelection.value = val
}
const multipleTableRef = ref<TableInstance>()
const multipleSelection = ref([])
const selectable = (row: any) => ![1, 2].includes(row.id)
//批量修改状态

const stateall=(state:any)=>
{
  if(multipleSelection.value.length==0)
{
  ElMessage.error("至少选择修改一项");
  return;
}

   ElMessageBox.confirm(
    '确认修改'+multipleSelection.value.length+'条数据吗?',
    '警告',
    {
      confirmButtonText: '确认',
      cancelButtonText: '取消',
      type: 'warning',
    }
  )
    .then(() => {
      myaxios.put(`/api/Warehouse/AllUpdateStateStoragelocation?storagelocationIds=${multipleSelection.value.map((item:any)=>item.storagelocationId)}&state=${state}`)
  .then(res=>
        {
            if(res.data.code==200)
        {
            ElMessage.success(res.data.message);
            getstoragelocation();
        }
        else
        {
            ElMessage.success(res.data.message);
        }
        })
    
      
    })
    .catch(() => {
      ElMessage({
        type: 'info',
        message: '取消修改',
      })
    })
  
}
//库位批量删除
const delall=()=>
{
  if(multipleSelection.value.length==0)
{
  ElMessage.error("至少选择删除一项");
  return;
}
   ElMessageBox.confirm(
    '确认删除'+multipleSelection.value.length+'条数据吗?',
    '警告',
    {
      confirmButtonText: '确认',
      cancelButtonText: '取消',
      type: 'warning',
    }
  )
    .then(() => {
      myaxios.put("/api/Warehouse/AllDeleteStoragelocation?storagelocationIds="+multipleSelection.value.map((item:any)=>item.storagelocationId))
  .then(res=>
        {
            if(res.data.code==200)
        {
            ElMessage.success(res.data.message);
            getstoragelocation();
        }
        else
        {
            ElMessage.success(res.data.message);
        }
        })
    })
    .catch(() => {
      ElMessage({
        type: 'info',
        message: '取消删除',
      })
    })
  
}
</script>
<style>
.demo-tabs > .el-tabs__content {
  padding: 32px;
  color: #6b778c;
  font-size: 32px;
  font-weight: 600;
}
</style>